<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Form Demo</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function(){
			//Color
			var color 	 = $('#colorpicker').val();
				hexcolor = $('#hexcolor');

			hexcolor.html(color);

			$('#colorpicker').on('change', function() {
			    hexcolor.html(this.value);
			});
			//Range
			var val 	= $('#slider').val();
				output 	= $('#output');

			output.html(val);

			$('#slider').on('change', function(){
			    output.html(this.value);
			});
		});
	</script>
  </script>
</head>
<body>
<section>
	<h3>HTML5 Form Demo</h3>
	<form action="date_form" method="get" accept-charset="utf-8" class="cf">
	<h4>Date and Time</h4>
		<label for="date">Date</label> <input type="date" name="date">
		<label for="month">Month</label> <input type="month" name="month">
		<label for="week">Week</label> <input type="week" name="week">
		<label for="time">time</label> <input type="time" name="time">
		<label for="datetime">Datetime</label> <input type="datetime" name="datetime">
		<label for="datetimelocal">Date Time Local</label> <input type="datetime-local" name="datetimelocal">
	<h4>Color Picker</h4>
		<label for="color">Color</label> <input type="color" id="colorpicker" name="color" value="#ff0000"> <div id="hexcolor"></div>
	<h4 style="margin-bottom: 0;">Range</h4>
		<div class="horizontal cf">
		<h5>Horizontal Slider</h5>
			<label for="range">Range</label> <input type="range" id="slider" value="10" name="range"> <div id="output"></div>
		</div>
		<div class="cf">
		<h5>Vertical Slider</h5>
			<input type="range" class="vertical" value="10" name="range">
		</div>
	</form>
</section>
</body>
</html>